<template>
  <div class="charge-record">
    <!-- 搜索筛选区 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="时间范围:">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="datetimerange"
            range-separator="—"
            start-placeholder="2025-05-01 00:00:00"
            end-placeholder="2025-05-02 00:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="date-picker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="用户名:">
          <el-input 
            v-model="filterForm.username" 
            placeholder="请输入"
            clearable
            class="filter-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间号:">
          <el-input 
            v-model="filterForm.roomNumber" 
            placeholder="请输入"
            clearable
            class="filter-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单类型:">
          <el-select 
            v-model="filterForm.orderType" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="电订单" value="electric"></el-option>
            <el-option label="水订单" value="water"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select 
            v-model="filterForm.auditStatus" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="已审核" value="audited"></el-option>
            <el-option label="未审核" value="unaudited"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区 -->
    <div class="action-container">
      <div class="action-buttons">
        <el-button type="success" icon="el-icon-upload2" @click="batchImport">批量导入</el-button>
        <el-button type="warning" icon="el-icon-download" @click="exportData">导出</el-button>
        <el-button type="info" icon="el-icon-document" @click="importData">导入</el-button>
        <el-button type="danger" icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>
        <el-button type="primary" icon="el-icon-printer" @click="printRecords">打印</el-button>
      </div>
    </div>
    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">
          <i class="el-icon-tickets"></i>
          充值记录列表
        </div>
        <div class="table-info">
          共 {{ tableData.length }} 条数据
        </div>
      </div>
      <el-table 
        :data="tableData" 
        border 
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        class="custom-table"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column prop="username" label="用户名" width="120" align="center"></el-table-column>
        <el-table-column prop="roomNumber" label="房间号" width="100" align="center"></el-table-column>
        <el-table-column prop="amount" label="金额 (¥)" width="120" align="center">
          <template slot-scope="scope">
            <span class="amount-value">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="getPaymentTypeColor(scope.row.paymentMethod)"
            >
              {{ scope.row.paymentMethod }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.orderType === '电订单' ? 'warning' : 'info'"
            >
              {{ scope.row.orderType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="salesType" label="销售类型" width="120" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="100" align="center"></el-table-column>
        <el-table-column prop="reviewer" label="审核人" width="100" align="center"></el-table-column>
        <el-table-column prop="chargeTime" label="审核时间" width="160" align="center"></el-table-column>
        <el-table-column prop="auditStatus" label="审核状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.auditStatus === '下发成功' ? 'success' : 'warning'"
            >
              {{ scope.row.auditStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="downloadStatus" label="下发状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.downloadStatus === '下发成功' ? 'success' : 'warning'"
            >
              {{ scope.row.downloadStatus }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="custom-pagination"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 导入弹窗 -->
    <el-dialog
      title="批量导入充值记录"
      :visible.sync="showImportDialog"
      width="600px"
      class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div class="import-content">
        <div class="import-tips">
          <el-alert
            title="导入说明"
            type="info"
            :closable="false"
            show-icon
          >
            <div slot="default">
              <p>1. 请先下载模板文件，按照模板格式填写数据</p>
              <p>2. 支持Excel文件格式(.xlsx, .xls)</p>
              <p>3. 单次最多导入1000条记录</p>
            </div>
          </el-alert>
        </div>
        <div class="upload-area">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
            accept=".xlsx,.xls"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传Excel文件，且不超过10MB</div>
          </el-upload>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showImportDialog = false">取消</el-button>
        <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
        <el-button 
          type="success" 
          @click="confirmImport"
          :disabled="fileList.length === 0"
          :loading="importing"
        >
          {{ importing ? '导入中...' : '确认导入' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import chargeRecordMock from '@/api/mock/chargeRecord'
export default {
  name: 'ChargeRecord',
  data() {
    return {
      loading: false,
      importing: false,
      tableData: [],
      filterForm: {
        dateRange: ['2025-05-01 00:00:00', '2025-05-02 00:00:00'],
        username: '',
        roomNumber: '',
        orderType: '',
        auditStatus: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showImportDialog: false,
      fileList: [],
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      setTimeout(() => {
        const response = chargeRecordMock
        this.tableData = response.msg.list
        this.pagination.total = response.msg.total
        this.loading = false
      }, 500)
    },
    searchData() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    resetFilter() {
      this.filterForm = {
        dateRange: ['2025-05-01 00:00:00', '2025-05-02 00:00:00'],
        username: '',
        roomNumber: '',
        orderType: '',
        auditStatus: ''
      }
      this.loadData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },
    batchImport() {
      this.showImportDialog = true
      this.fileList = []
    },
    exportData() {
      this.$message.success('导出数据功能')
    },
    importData() {
      this.showImportDialog = true
    },
    downloadTemplate() {
      this.$message.success('下载模板功能')
    },
    printRecords() {
      this.$message.success('打印记录功能')
    },
    getPaymentTypeColor(type) {
      const colorMap = {
        '现金支付': 'success',
        '支付宝': 'primary',
        '微信支付': 'warning',
        '银行卡': 'info'
      }
      return colorMap[type] || 'default'
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList
    },
    confirmImport() {
      if (this.fileList.length === 0) {
        this.$message.warning('请选择要导入的文件')
        return
      }
      this.importing = true
      setTimeout(() => {
        this.$message.success('导入成功')
        this.importing = false
        this.showImportDialog = false
        this.loadData()
      }, 2000)
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.charge-record {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}
/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 24px;
}
/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title i {
  color: #f39c12;
  font-size: 28px;
}
/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 24px;
}
.filter-form {
  margin: 0;
}
.date-picker {
  width: 350px;
}
.filter-input {
  width: 150px;
}
.filter-select {
  width: 120px;
}
/* 操作按钮区 */
.action-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 20px 24px;
}
.action-buttons {
  display: flex;
  gap: 12px;
}
.action-buttons .el-button {
  border-radius: 8px;
  font-weight: 500;
}
/* 表格容器 */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #f39c12;
  font-size: 20px;
}
.table-info {
  color: #6c757d;
  font-size: 14px;
}
.amount-value {
  color: #27ae60;
  font-weight: 600;
  font-size: 16px;
}
/* 分页容器 */
.pagination-container {
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: center;
}
.custom-pagination {
  text-align: center;
}
/* 导入弹窗样式 */
.import-content {
  padding: 20px;
}
.import-tips {
  margin-bottom: 24px;
}
.upload-area {
  margin-top: 20px;
}
.upload-demo {
  width: 100%;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .charge-record {
    padding: 16px;
  }
  .filter-form {
    flex-direction: column;
  }
  .date-picker,
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .action-buttons {
    flex-wrap: wrap;
  }
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>
